<!--业务流程--可疑品流业务流程-->
<template>
  <div style="margin: 0;padding: 0">
    <el-container>
      <!--页面表头设计-->
      <el-header style="height: 39px">
        <el-link class="headMain" href="http://10.255.96.48:3404/">{{ main.qualityManagementSystem }}</el-link>
        <span class="center-text">{{ main.productDataCheckListHandling }}</span>
        <el-popover
            placement="top-start"
            title="用户信息"
            width="200"
            trigger="hover">
          <div style="margin-top: 10px">Name：{{ useName }}</div>
          <div style="margin-top: 10px">ID:{{ useId }}</div>
          <div style="margin-top: 10px" @click="logOut">
            <el-link>退出</el-link>
          </div>
          <div class="headMain" slot="reference">{{ useName }}</div>
        </el-popover>
      </el-header>
      <el-container>
        <el-aside class="el-aside" width="200px" style="height: 90vh">
          <div style="margin-top: 5px;">
            <el-button style="width: 100%" :style="buttonStyle[0]" @click="buttonClick(0)">
              装配车间
            </el-button>
            <!-- 显示工序列表 -->
            <div v-if="showOperations">
              <ul>
                <li v-for="(op, index) in assemblyStationOperations" :key="index">
                  <!-- 每个工序用 el-button 包裹，点击按钮触发点击事件 -->
                  <el-button @click="handleOperationClick(op,index)"
                             style="width: 100% ; margin-bottom:4px"
                             :style="assemblyStationButtonStyle(index)">
                    {{ op }}
                  </el-button>
                </li>
              </ul>
            </div>
          </div>
          <div style="margin-top:10px;">
            <el-button style="width: 100%" :style="buttonStyle[1]" @click="buttonClick(1)">
              待开发{{ main.machiningWorkshop }}
            </el-button>
          </div>
          <div style="margin-top:10px;">
            <el-button style="width: 100%" :style="buttonStyle[2]" @click="buttonClick(2)">待开发{{ main.logistics }}
            </el-button>
          </div>
        </el-aside>
        <el-container>
          <!--主题设计-->
          <el-main class="el-main" style="height: calc(80vh - 83px);overflow: auto">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="关键力矩审核" name="checkList">
                <div style="margin-bottom: 5px; display: flex; justify-content: flex-end; ">
                  <!-- 发动机号筛选框 -->
                  <div style="font-size: 14px;margin-right: 5px;margin-left: 5px">
                    发动机号：
                    <el-input
                        placeholder="请输入发动机号"
                        v-model="engineNumberFilterValue"
                        size="mini" style="width: 250px;"
                        clearable>
                    </el-input>
                  </div>
                  <!-- 按工序筛选和选择列表 -->
                  <div style="font-size: 14px;margin-right: 5px;margin-left: 5px">
                    工序：
                    <el-select v-model="stationSelectList" size="mini" filterable placeholder="未选择"
                               style="width:160px;">
                      <el-option
                          v-for="item in stationSelectOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                  </div>
                  <!-- 时间筛选和选择列表 -->
                  <div style="font-size: 14px;margin-right: 5px;margin-left: 5px">
                    时间选择：
                    <el-date-picker
                        v-model="dateTimeScope"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        size="mini"
                        style="margin-right: 10px"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                  </div>
                  <!-- 查询按钮 -->
                  <div style="text-align: right;">
                    <el-button type="primary" size="mini" icon="el-icon-search" @click="conditionsAndDateScope()">查询
                    </el-button>
                  </div>
                </div>
                <!------------数据检查后的列表区域----待修改------------->
                <el-table
                    :data="checkListShowData"
                    border
                    :height="checkListTableHeight"
                    style="width: 100%">
                  <el-table-column
                      label="序号"
                      align="center"
                      width="80"
                      v-slot:default="scope">
                    {{ scope.$index + 1 }}
                  </el-table-column>
                  <el-table-column
                      prop="workshop"
                      label="车间"
                      align="center"
                      width="100"
                      :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column
                      prop="engine_number"
                      label="发动机号"
                      align="center"
                      width="180"
                      :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column
                      prop="create_time"
                      label="力矩检查时间"
                      align="center"
                      width="200"
                      :show-overflow-tooltip="true">
                  </el-table-column>
                  <el-table-column
                      prop="oP40"
                      label="OP40检测结果"
                      align="center"
                      width="740"
                      :show-overflow-tooltip="true">
                  </el-table-column>
<!--                  <el-table-column-->
<!--                      prop="OP90"-->
<!--                      label="OP90检测结果"-->
<!--                      align="center"-->
<!--                      width="140"-->
<!--                      :show-overflow-tooltip="true">-->
<!--                  </el-table-column>-->
<!--                  <el-table-column-->
<!--                      prop="OP170"-->
<!--                      label="OP170检测结果"-->
<!--                      align="center"-->
<!--                      width="140"-->
<!--                      :show-overflow-tooltip="true">-->
<!--                  </el-table-column>-->
<!--                  <el-table-column-->
<!--                      prop="OP210"-->
<!--                      label="OP210检测结果"-->
<!--                      align="center"-->
<!--                      width="140"-->
<!--                      :show-overflow-tooltip="true">-->
<!--                  </el-table-column>-->
<!--                  <el-table-column-->
<!--                      prop="OP400"-->
<!--                      label="OP400检测结果"-->
<!--                      align="center"-->
<!--                      width="140"-->
<!--                      :show-overflow-tooltip="true">-->
<!--                  </el-table-column>-->
<!--                  <el-table-column-->
<!--                      prop="process_status"-->
<!--                      label="是否确认"-->
<!--                      align="center"-->
<!--                      width="90"-->
<!--                      :show-overflow-tooltip="true">-->
<!--                  </el-table-column>-->
<!--                  <el-table-column-->
<!--                      prop="sys_audit_user"-->
<!--                      label="确认人"-->
<!--                      align="center"-->
<!--                      width="90"-->
<!--                      :show-overflow-tooltip="true">-->
<!--                  </el-table-column>-->
<!--                  <el-table-column-->
<!--                      label="编辑"-->
<!--                      align="center"-->
<!--                      width="60"-->
<!--                      v-slot:default="scope">-->
<!--                    <el-link @click="suspectListShow(2,scope)">-->
<!--                      <i class="el-icon-edit"></i>-->
<!--                    </el-link>-->
<!--                  </el-table-column>-->
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="逻辑说明" name="suspiciousDisposal">
                逻辑说明
              </el-tab-pane>
              <el-tab-pane label="待开发业务3" name="defectiveList">
                待开发业务3
              </el-tab-pane>
              <el-tab-pane label="待开发业务4" name="repairCheckList">
                待开发业务4
              </el-tab-pane>
            </el-tabs>

          </el-main>
          <el-footer class="el-footer" style="height: 44px">
            <el-button plain size="mini" @click="languageSelect('chinese')">中 文</el-button>
            <el-button plain size="mini" @click="languageSelect('russian')">Русский язык</el-button>
            <el-button plain size="mini" @click="languageSelect('english')">English</el-button>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>

    <!-----------------------------------------------弹窗放置区--开始----------------------------------------------------->


    <!--------------------------------------------弹窗放置区域---结束------------------------------------------------------>


    <!--抽屉放置区域-->
  </div>
</template>

<script>
import E from "wangeditor";

export default {
  name: "productDataCheckList",
  computed: {},
  data() {
    return {
      //用户权限相关的变量
      useName: '',//用户名称
      useId: '',//用户编号
      usePower: '',//用户权限
      //用户登录后默认为中文
      languageS: 'chinese',
      //切换语言，页面变量
      main: {
        qualityManagementSystem: '俄动力质量管理系统',
        productDataCheckListHandling: '成品AI品质门',
      },
      //分页显示的控制变量
      activeName: 'checkList',
      //导航区的按钮样式
      buttonStyle: [
        {backgroundColor: 'blue', color: 'white'},
        {backgroundColor: '', color: ''},
        {backgroundColor: '', color: ''},
      ],

      /*-------------------------关键力矩审核列表中变量-----------------------------------------------------------------*/

      //AI品质门--页面表单表头高度变量
      checkListTableHeight: window.visualViewport.height - 226,
      //AI品质门左侧栏--控制装配车间下工序列表是否显示
      showOperations: false,
      //AI品质门左侧栏--装配工位列表
      assemblyStationOperations: ['OP40', 'OP90', 'OP170', 'OP210', 'OP400'],
      //AI品质门左侧栏--左侧选项栏中用来记录当前选中的工序按钮索引
      selectedOpIndex: null,
      //AI品质门关键力矩审核--数据显示表单，解析后台发送的数据，在表单中使用
      checkListShowData: [
        {
          //主键
          id: '',
          //创建时间
          create_time: '',
          //更新时间
          update_time: '',
          //创建人
          creator: '',
          //流程状态
          process_status: '',
          //更新人
          sys_update_user: '',
          //审核人
          sys_audit_user: '',
          //审核时间
          sys_audit_time: '',
          //逻辑删除
          sys_deleted: '',
          //生产车间名称
          workshop: '',
          //零部件名称
          engine_number: '',
          //OP40工序
          OP40: '',
          //OP90工序
          OP90: '',
          //OP170工序
          OP170: '',
          //OP210工序
          OP210: '',
          //OP400工序
          OP400: ''
        }
      ],
      //AI品质门关键力矩审核--数据显示表单，用户修改时展示的变量内容，显示给用户
      checkListShowForm: {
        //主键
        id: '',
        //创建时间
        create_time: '',
        //更新时间
        update_time: '',
        //创建人
        creator: '',
        //流程状态
        process_status: '',
        //更新人
        sys_update_user: '',
        //审核人
        sys_audit_user: '',
        //审核时间
        sys_audit_time: '',
        //逻辑删除
        sys_deleted: '',
        //生产车间名称
        workshop: '',
        //零部件名称
        engine_number: '',
        //OP40工序
        OP40: '',
        //OP90工序
        OP90: '',
        //OP170工序
        OP170: '',
        //OP210工序
        OP210: '',
        //OP400工序
        OP400: ''
      },
      //AI品质门筛选区域--筛选用时间选择器
      dateTimeScope: '',
      //AI品质门筛选区域--按工位进行筛选的选择列表
      stationSelectOptions: [
        {value: '全部/All/все', label: '全部/All/все'},
        {value: 'OP40', label: 'OP40'},
        {value: 'OP90', label: 'OP90'},
        {value: 'OP170', label: 'OP170'},
        {value: 'OP210', label: 'OP210'},
        {value: 'OP400 ', label: 'OP400'},
      ],
      //AI品质门筛选区域--筛选后工序记录的值
      stationSelectList: '全部/All/все',
      //AI品质门筛选区域--发动机号筛选值
      engineNumberFilterValue: '',

      /*--------------------可疑品处置中相关变量---------------------------------------------------------------------*/

      //用户现在的编辑状态：1.新增、2.编辑
      suspectListShowDoe: 0,
      //记录用户点击哪一行
      suspectListShowScope: null,

      //可疑品弹窗中适用机型的选择列表 EN EB
      modelIdOptions: [
        {value: 'EB/EN', label: 'EB/EN'},
        {value: 'EB全系', label: 'EB全系'},
        {value: 'EN全系', label: 'EN全系'},
        {value: 'EB05', label: 'EB05'},
        {value: 'EB35', label: 'EB35'},
        {value: 'EB75', label: 'EB75'},
        {value: 'EN19', label: 'EN19'},
        {value: 'EN38', label: 'EN38'},
      ],
      //可疑品处理--追溯判定--是否追溯选择列表
      productTraceability: [
        {value: 'EB/EN', label: 'EB/EN'},
        {value: 'EB全系', label: 'EB全系'},
        {value: 'EN全系', label: 'EN全系'},
        {value: 'EB05', label: 'EB05'},
        {value: 'EB35', label: 'EB35'},
        {value: 'EB75', label: 'EB75'},
        {value: 'EN19', label: 'EN19'},
        {value: 'EN38', label: 'EN38'},
      ],

      //可疑品弹窗中发生环节的选择列表 各个科室
      linkOptions: [
        {label: '机加/Machining Workshop/Обработки линия', value: '机加/Machining Workshop/Обработки линия'},
        {label: '装配/Assembly Workshop/Сборочная линия', value: '装配/Assembly Workshop/Сборочная линия'},
        {label: '产技/Quality Technology/Tехнологий качества', value: '产技/Quality Technology/Tехнологий качества'},
        {label: '品管/Quality Management/Управления качеством', value: '品管/Quality Management/Управления качеством'},
        {
          label: '制技/Manufacture Tech/Tехнологии производства',
          value: '制技/Manufacture Tech/Tехнологии производства'
        },
        {label: '物流/Logistics Department/Отдел логистики', value: '物流/Logistics Department/Отдел логистики'},
        {
          label: '设备/Maintenance Utility/Oбслуживания оборудования',
          value: '设备/Maintenance Utility/Oбслуживания оборудования'
        },
      ],


      //存放富文本
      editor: null
    }
  },

  watch: {
    //可疑品清单--添加/编辑弹窗中的零部件名称选项---操作函数
    'checkListShowForm.part_name'(newVal) {
      if (newVal.split('/').length === 5) {
        this.checkListShowForm.part_supplier = newVal.split('/')[4]
      } else if (newVal === '') {
        this.checkListShowForm.part_supplier = ''
      }
    },
  },

  methods: {
    //退出登录
    logOut() {
      localStorage.removeItem('u_token');
      localStorage.removeItem('userName')
      this.$router.push('UserLogin')
    },
    //查询用户信息的函数
    inquiry() {
      //输入用户编号，向后端查询信息
      const useId = localStorage.getItem('userName').replace(/"/g, '');
      this.$request.post('/useQueryPower', {
        queryFiledName: 'goodProductCondition',
        userId: useId,
      }).then(result => {
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        } else {
          this.useName = result.data.name
          this.usePower = result.data.goodProductCondition
          this.useId = useId
        }
      })
    },
    //语言切换选择的函数
    languageSelect(language) {
      this.languageS = language
      if (language === 'chinese') {
        //main
        this.main.qualityManagementSystem = '俄动力质量管理系统'
        this.main.productDataCheckListHandling = '成品AI品质门'
      } else if (language === 'english') {
        //main
        this.main.qualityManagementSystem = 'Quality Management System'
        this.main.productDataCheckListHandling = 'AI Production Data Detection'
      } else if (language === 'russian') {
        //main
        this.main.qualityManagementSystem = 'Система управления качеством'
        this.main.productDataCheckListHandling = 'Обнаружение данных о производстве ИИ'
      }
    },

    //在可疑品业务页面中点击tabs标签页的显示调用函数，当页面等于设定的标签，对后端进行发送post请求
    handleClick() {
      //点击名称为suspectList（网页中名字为可疑品清单）
      if (this.activeName === 'checkList') {
        //发送post至后端，并处理接收到的结果
        this.queryAllProductDataCheckList().then(data => {
          this.checkListShowData = data
          console.log(data)
        })
      }
    },

    //页面左侧导航栏中选择不同的按钮后，对应选中的按钮进行背景色和文字颜色进行设定和变更，展示选定的项目
    buttonClick(doe) {
      if (doe === 0) {
        this.buttonStyle = [
          {backgroundColor: 'blue', color: 'white'},
          {backgroundColor: '', color: ''},
          {backgroundColor: '', color: ''}
        ];
        this.showOperations = !this.showOperations;
      } else if (doe === 1) {
        this.buttonStyle = [
          {backgroundColor: '', color: ''},
          {backgroundColor: 'blue', color: 'white'},
          {backgroundColor: '', color: ''}
        ];
      } else if (doe === 2) {
        this.buttonStyle = [
          {backgroundColor: '', color: ''},
          {backgroundColor: '', color: ''},
          {backgroundColor: 'blue', color: 'white'}
        ];
      }
    },
    // 装配车间的展开项，OP工位名称选择
    handleOperationClick(op, index) {
      this.selectedOpIndex = index;
      console.log(`工序 ${op} 被点击了!${index}`);
    },
    //AI品质门
    assemblyStationButtonStyle(index) {
      // 如果当前按钮是选中的，返回选中样式
      if (this.selectedOpIndex === index) {
        return {backgroundColor: 'lightgray', color: 'white'};  // 可以自定义样式
      }
      // 否则返回默认样式
      return {backgroundColor: 'transparent', color: 'black'};
    },

    //AI品质门关键力矩审核--按条件和时间筛选的监视函数--用户筛选后显示数据
    conditionsAndDateScope() {
      if (this.dateTimeScope !== null && this.dateTimeScope.length > 0) {
        this.queryExceptionByTimeScopeProductDataCheckList('create_time', this.dateTimeScope[0], this.dateTimeScope[1]).then(data => {
          if (this.stationSelectList === '全部/All/все') {
            this.checkListShowData = data
          }
        })
      }
      else {
        // 获取当前时间 和上个月的时间
        let currentDate = new Date();
        let pastDate = new Date(currentDate); // 创建一个当前时间的副本
        pastDate.setMonth(currentDate.getMonth() - 10); // 设置为上10个月
        //时间格式转化后重新赋值
        pastDate = this.formatDate(pastDate)
        currentDate = this.formatDate(currentDate)

        // 如果没有设置日期的时候，默认为当前的时间向前10个月的时间，进行搜索，然后在判断赋值。
        this.queryExceptionByTimeScopeProductDataCheckList('create_time', pastDate, currentDate).then(data => {
          if (this.stationSelectList === '全部/All/все') {
            this.checkListShowData = data
          }
        })
      }
    },


    //弹窗表单中，关闭功能
    //无意关闭弹窗的函数
    handleClose(done) {
      this.$confirm('确认关闭？')
          // eslint-disable-next-line no-unused-vars
          .then(_ => {
            done();
          })
          // eslint-disable-next-line no-unused-vars
          .catch(_ => {
          });
    },


    /*---------------------------------------------------辅助函数区域--------------------------------------------------*/
    //辅助函数：  初始化 wangEditor
    initEditor() {
      this.editor = null

      this.editor = new E(this.$refs.editorContainer);
      this.editor.config.menus = [
        'head',
        'bold',
        'italic',
        'underline',
        'strikeThrough',
        'foreColor',
        'backColor',
        'list',
        'justify',
        'table',
        // 其他你需要的菜单...
      ]
      this.editor.create();
    },

    //辅助函数：去读取全部内容
    queryAllProductDataCheckList() {
      return new Promise((resolve, reject) => {
        this.$request.post('/queryAllProductDataCheckListProductDataCheckList').then(result => {
          if (result.code === 401) {
            this.router.push('UserLogin');
            alert("您未登录，请登录");
            reject("未登录"); // 返回错误信息
          } else {

            resolve(result.data)
            console.log(result.data); // 返回数据$
          }
        }).catch(error => {
          reject(error); // 捕获请求错误
        });
      });
    },

    //辅助函数：根据具某一字段=某一值的时候，筛选内容
    queryOneFieldSuspectProductList(fieldName, fieldVal) {
      return new Promise((resolve, reject) => {
        this.$request.post('/queryOneFieldSuspectProductListSuspectProductGuo', {
          fieldName: fieldName,
          fieldVal: fieldVal,
        }).then(result => {
          if (result.code === 401) {
            this.router.push('UserLogin');
            alert("您未登录，请登录");
            reject("未登录"); // 返回错误信息
          } else {
            resolve(result.data); // 返回数据$
          }
        }).catch(error => {
          reject(error); // 捕获请求错误
        });
      });
    },

    //辅助函数：可疑品清单中，对日期类型的数据，筛选≥某一个值，和＜某一个值，
    queryExceptionByTimeScopeProductDataCheckList(filedName, minVal, maxVal) {
      return new Promise((resolve, reject) => {
        this.$request.post('/queryExceptionByTimeScopeProductDataCheckList', {
          //查询的变量名称
          fieldName: filedName,
          //时间的最小值
          minVal: minVal,
          //时间的最大值
          maxVal: maxVal
        }).then(result => {
          if (result.code === 401) {
            this.$router.push('UserLogin');
            alert("您未登录，请登录");
            reject("未登录"); // 返回错误信息
          } else {
            resolve(result.data); // 返回数据
          }
        }).catch(error => {
          reject(error); // 捕获请求错误
        });
      });
    },
    //辅助函数，获得当前的年月日
    getCurrentDate() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1
      const day = String(now.getDate()).padStart(2, '0');

      return `${year}-${month}-${day}`;
    },
    //辅助函数，读取当前时间的函数并转化成yyyy-MM-dd HH：mm：ss 的格式
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');  // 月份从0开始，所以要加1，并且确保是2位数
      const day = String(date.getDate()).padStart(2, '0'); // 确保是2位数
      const hours = String(date.getHours()).padStart(2, '0'); // 时
      const minutes = String(date.getMinutes()).padStart(2, '0'); // 分
      const seconds = String(date.getSeconds()).padStart(2, '0'); // 秒

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }

  },

  mounted() {
    this.inquiry()
    this.inquiryProductListBaseComponentAll()
    this.queryOneFieldSuspectProductList('link', '装配/Assembly Workshop/Сборочная линия').then(data => {
      this.suspectListShowData = data
    })
    //初始化可疑品清单的默认选择值
    this.stationSelectList = '全部/All/все'
    this.suspectDisposalShowForm = null
  },
}
</script>

<style scoped>
/* 主体左侧的工作步骤栏用到的数据包围的div的样式*/

.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  border-left-color: white;
  border-top: white;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  height: 89vh;
}

.el-main {
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-left-color: white;
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  overflow: auto;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.headMain {
  color: #ffffff; /* 设置字体颜色为红色 */
  font-size: 18px;
}

.center-text {
  /* 使用 margin-left 和 margin-right auto 来实现居中效果 */
  margin-left: auto;
  margin-right: auto;
  /* 注意：如果 header 内只有这两个元素，你可能不需要 margin-right: auto */
}

.el-container {
  overflow: auto; /* 自动显示滚动条当内容溢出时 */
  /* 或者 */
  overflow-x: auto; /* 仅水平滚动 */
  overflow-y: auto; /* 仅垂直滚动 */
}

/*自定义样式*/

</style>